// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle{
    id: _root
    width: 150
    height: 200
    border.color: "#888888"
    border.width: 1

    property alias count: _list.count
    property alias currentIndex: _list.currentIndex
    property alias orientation: _list.orientation
    property alias scrollBarVisible: _list.scrollBarVisible

    signal clicked(variant mouse, string title)

    function clear(){
        _list.model.clear();
    }
    function append(str){
        _list.model.append({"_title": str});
    }
    function get(i){
        return _list.model.get(i);
    }
    function setCurrentIndex(index){
        _list.currentIndex = index;
    }

    Component {
        id: _highlightBar
        Rectangle {
            width: (_list.currentItem === null) ? 0 : _list.currentItem.width
            height: (_list.currentItem === null) ? 0 : _list.currentItem.height
            color: "#888888dd"
//            radius: 20
            x: (_list.currentItem === null) ? 0 : _list.currentItem.x;
            y: (_list.currentItem === null) ? 0 : _list.currentItem.y;
            Behavior on y { SmoothedAnimation { duration: 200 } }
//            Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
        }
    }

    Image{
        anchors.fill: parent
        anchors.topMargin: 1
        anchors.leftMargin: 1
        fillMode: Image.Tile
        source: "../images/background_light.png"
    }

    ListViewBase{
        id: _list
        anchors.fill: parent
        clip: true
        alwaysViewing: true
        scrollBarBaseColor: "#22000000"
        scrollBarColor: "#dd222222"

        highlight: _highlightBar
        highlightFollowsCurrentItem: false

        model: ListModel{}
        delegate: Rectangle{
            id: _delegate
            width: _list.orientation === ListView.Vertical ? _list.width-1 : _list.width / _list.count
            height: 30
            color: "#00000000"
            border.color: "#888888"
            border.width: 1
//            opacity: 0.8
            Text{
                anchors.centerIn: parent
                text: _title
                color: "#ffffff"
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    _list.currentIndex = index;
                    _root.clicked(mouse, _title);
                }
                property color prev_color: _delegate.color
                onPressed: {
                    prev_color = _delegate.color;
                    _delegate.color = "#88dd8888";
                }
                onReleased: {
                    _delegate.color = prev_color;
                }
                onCanceled: {
                    _delegate.color = "#00ffffff";
                }
                onEntered: {
                    _delegate.color = "#88888888";
                }
                onExited: {
                    _delegate.color = "#00ffffff";
                }
            }
        }
    }
}
